<!-- 推送设置 -->
<template>
	<view class="page">
		<u-navbar title="推送设置" titleStyle="font-weight: bold;font-size: 30rpx;" :fixed="true" :autoBack="true"></u-navbar>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<u-cell-group :border="false">
			<u-cell size="large" title="系统推送通知">
				<text slot="value" @click="open(1)" class="u-slot-value" style="color: #999;">{{ pushStater ? '已开启' : '已关闭' }}</text>
			</u-cell>
		</u-cell-group>
		<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
		<template v-if="pushStater">
			<u-cell-group :border="false">
				<u-cell size="large" title="有人关注我"><u-switch slot="value" v-model="attention" size="10"></u-switch></u-cell>
				<u-cell size="large" title="有人打赏我"><u-switch slot="value" v-model="comment" size="10"></u-switch></u-cell>
				<u-cell size="large" title="有人评论我"><u-switch slot="value" v-model="playTour" size="10"></u-switch></u-cell>
			</u-cell-group>
			<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
			<u-cell-group :border="false">
				<u-cell size="large" title="我的回答"><u-switch slot="value" v-model="answer" size="10"></u-switch></u-cell>
			</u-cell-group>
			<u-gap height="20rpx" bgColor="#f2f2f2"></u-gap>
			<u-cell-group :border="false">
				<u-cell size="large" title="我的课程"><u-switch slot="value" v-model="course" size="10"></u-switch></u-cell>
			</u-cell-group>
		</template>
		<view class="box" v-else>
			<view class="tips">你将无法收到帮友消息及烘焙帮的优惠活动通知</view>
			<img src="@/static/img/push.png" alt="" width="100%" />
			<u-button plain type="error" text="确定" style="width: 200rpx;" @click="open(2)"></u-button>
		</view>

		<u-modal @confirm="confirm" @cancel="cancel" :show="show" :title="title" :content="content" width="600rpx" showCancelButton>
			<view class="slot-content"><rich-text :nodes="content"></rich-text></view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pushStater: true,
			show: false,
			title: '温馨提示',
			content: '是否关闭推送',

			attention: false,
			comment: false,
			playTour: true,
			answer: true,
			course: true
		};
	},
	methods: {
		// 打开弹窗
		open(str) {
			if (str === 1 && this.pushStater == false) {
				return;
			} else if(str === 2){
				this.pushStater = true
			} else {
				this.show = true;
			}
		},
		// 成功的回调
		confirm() {
			this.show = false;
			this.pushStater = !this.pushStater;
		},
		// 失败的回调
		cancel() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding-top: 88rpx;
	.tips {
		width: 100%;
		color: #999;
		margin: 80rpx 0 40rpx;
		text-align: center;
	}
	.box {
		padding-top: 20rpx;
		height: calc(100vh - 200rpx);
		background-color: #f6f7f9;
	}
}
</style>
